<template>
    <div id="tmpl">
        <!-- 首页轮播图 -->
        <mt-swipe :auto="3000">
            <mt-swipe-item v-for="item in lunbo.img_list" :key="item.id">
                <img :src="item.img">
            </mt-swipe-item>
        </mt-swipe>

        <!-- 首页九宫格 -->
        <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/anchor/anchorlist">
                            <span class="mui-icon mui-icon-home"></span>
                            <div class="mui-media-body">主播</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                            <span class="mui-icon mui-icon-email"></span>
                            <div class="mui-media-body">直播机构</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">店铺</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">商品</div>  
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">搜索</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">其他</div>
                        </router-link>
                    </li>
		        </ul> 
		</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            lunbo:{
                img_list:[
                    {"id":1,"img":"../../statics/imges/280043_2.jpg"},
                    {"id":2,"img":"../../statics/imges/280043_3.jpg"},
                    {"id":3,"img":"../../statics/imges/280043_9.jpg"},
                ],
            },
        }
    },
}
</script>
<style scoped>
    .mint-swipe{
        height:300px;
    }
    .mint-swipe-item img{
        height: 300px;
        width: 100%;
    }
    .mint-swipe-item{
        background-color: red;
        width:100%;
        height: 300px;
    }
    .mui-grid-view.mui-grid-9{
        background-color: white;
        border-top: 0;
        border-left: 0;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right: 0;
        border-bottom: 0;
    }
    .mui-icon-home:before,
    .mui-icon-email:before,
    .mui-icon-chatbubble:before,
    .mui-icon-location:before,
    .mui-icon-search:before,
    .mui-icon-phone:before{
        content: "";
        display: inline-block;
        width:50px;
        height:50px;
        background-repeat: round;
    }
    .mui-icon-home:before{
        background-image: url("http://img.alicdn.com/tfs/TB1kQydcN9YBuNjy0FfXXXIsVXa-100-100.png");
    }
    .mui-icon-email:before{
        background-image: url("http://img.alicdn.com/tfs/TB1mRJTcSCWBuNjy0FhXXb6EVXa-100-100.png");
    }
    .mui-icon-chatbubble:before{
        background-image: url("http://img.alicdn.com/tfs/TB1clJTcSCWBuNjy0FhXXb6EVXa-100-100.png");
    }
    .mui-icon-location:before{
        background-image: url("http://img.alicdn.com/tfs/TB1dJh2cFOWBuNjy0FiXXXFxVXa-100-100.png");
    }
    .mui-icon-search:before{
        background-image: url("http://img.alicdn.com/tfs/TB1u.4zuxSYBuNjSsphXXbGvVXa-100-100.png");
    }
    .mui-icon-phone:before{
        background-image: url("http://img.alicdn.com/tfs/TB1ndh2cFOWBuNjy0FiXXXFxVXa-100-100.png");
    }


</style>